<template>
	<view class="post">
		<view @click="handlePostDetail">
			<view class="header" @click.stop="handleUserDetail">
				<view class="header-left">
					<up-avatar :src="props.post?.user.avatar"></up-avatar>
					<view class="author-infor">
						<text class="author">{{props.post?.user.user_name}}</text>
						<text class="time">{{formatTime(props.post?.user_post.create_time)}}</text>
					</view>
				</view>
				<view class="header-right">
					<button
						size="mini" 
						type="primary" 
						class="btn"
						plain="true"
						hairline="true" 
						hover-class="none" 
						@click.stop="clickFollow(item)">关注</button>
					<i class="iconfont icon-qita" @click.stop="handleReportPost"></i>
				</view>
				
			</view>
			<view class="center"> 
				<view class="content">
					<up-text v-if="props.isEllipsis" :lines="3" :text="props.post?.user_post.content"></up-text>
					<up-text v-else :text="props.post?.user_post.content"></up-text>
				</view>
				<view class="images">
					<view 
						v-for="(img, index) in props.post?.attachments" 
						:key="index" 
						@click.stop="previewImage(img.resource_url)"> 
						<image :src="img.resource_url" mode="aspectFill" class="image"/>
					</view>
				</view>
			</view>
			<view class="bottom">
				<span class="views">
					<up-icon name="eye" size="24"></up-icon>
					{{props.post?.user_post.views_count}}
				</span>
				<Favor
					:favor="props.post?.user_post.favorites_count" 
					:favor_status="props.post?.user_status.favor_status"
					@update:favor_status="handleFavor"/>
				<span 
					class="views">
					<up-icon name="chat" size="24"></up-icon>
					{{props.post?.user_post.replies_count}}
				</span>
				<Likes 
					:likes="props.post?.user_post.likes_count" 
					:likes_status="props.post?.user_status.likes_status"
					@update:likes_status="handleLikes"/>
			</view>
		</view>
		<Report 
			:showReport="showReport" 
			:reportType="reportType" 
			@update:report="handleReport"/>
	</view>
</template>

<script lang="ts" name="Post" setup>
	import Likes from '../../components/likes/likes.vue';
	import Favor from '../../components/favor/favor.vue';
	import Report from '../report/report.vue'
	import formatTime from '../../common/formatTime.js'
	import login from '../../common/login.js'
	import {postLike , postFavor } from '../../apis/like'
	import {postReport} from '../../apis/report'
	import {reactive,defineProps, ref} from 'vue';

	const props = defineProps({
		isEllipsis: {
			type: Boolean,
			default: false // 设置默认值  
		},
		post: {
			type: Object,
		},
	})
	let showReport = ref(false)
	let reportType	 = reactive([
		// { name: '风险地点' },  
		{ name: '涉嫌欺诈' },  
		{ name: '色情低俗' },
		{ name: '违法犯罪' },
		{ name: '政治敏感' },
		{ name: '虚假不实' },
		{ name: '涉未成年' },
		{ name: '辱骂引战' },
		// { name: '违反公德秩序' },
		// { name: '低差广告' },
		// { name: '危害人身安全' },	
		// { name: '搬运抄袭洗稿' },
		// { name: '侵犯权益' },
		// { name: '违规售卖' },
		// { name: '其他' },
	])
	
	

	
	function previewImage(src){
		let newAttachments = post.attachments.map(attachment => attachment.resource_url); 
		uni.previewImage({  
			urls:newAttachments, // 需要预览的图片http链接列表  
			current: src, // 当前显示图片的http链接  
			success: function (res) {  
			  // 预览成功  
			  console.log(res,'成功');
			},  
			fail: function (err) {  
			  // 预览失败  
			  console.log(err,'失败');
			}  
		  });  
	}
	function handlePostDetail(){	
		console.log('跳转帖子详情');
		console.log(getCurrentPages());
		if(getCurrentPages().length === 1) {
			uni.navigateTo({
				url: `/pages/postDetail/postDetail?postID=${props.post.user_post.id}`
			})
		}
		if(getCurrentPages().length === 2 && getCurrentPages()[1].route === 'pages/circleDetail/circleDetail') {
			uni.navigateTo({
				url: `/pages/postDetail/postDetail?postID=${props.post.user_post.id}`
			})
		}
	}
	function handleUserDetail(){
		console.log("个人详情页");
		// uni.navigateTo({
		// 	url: `/pages/postDetail/postDetail?id=${props.post.user.user_id}`
		// })
	}
	// 收藏
	async function handleFavor(newStatus:boolean){		
		console.log(props.post.user_post.id);
		if(login()){
			props.post.user_status.favor_status = newStatus;
			if(newStatus){
				props.post.user_post.favorites_count += 1;
			}
			else{
				props.post.user_post.favorites_count -= 1;
			}
			const res = await postFavor({
				post_id:props.post.user_post.id+"",
				favorite_status:!newStatus ? 1:0
			})	
		}
	}
	//点赞
	async function handleLikes(newStatus:boolean){
		if(login()){
			props.post.user_status.likes_status = newStatus;
			if(newStatus){
				props.post.user_post.likes_count += 1;
			}
			else{
				props.post.user_post.likes_count -= 1;
			}
			const res = await postLike({
				id:props.post.user_post.id+"",
				like_type:1,
				like_status:!newStatus ? 1:0
			})	
		}
	}
	//关注用户	
	function clickFollow(item){
		if(login()){
			console.log(item);
			console.log("关注");
		}
	}
	
	function setActionSheetItems(isLogin) {  
		console.log(isLogin);
	    let itemList = [];  
	    switch (isLogin) {  
	        case 'true':  //如果是作者
	            itemList = ['举报', '删除','编辑'];  
	            break;  
	        case 'false':  
	            itemList = ['举报']; // 用户可能只有回复和举报的权限  
	            break;  
	    }  
	    return itemList;  
	}  
	// 举报帖子操作菜单显示与隐藏
	function handleReport(newStatus:boolean){
		showReport.value = newStatus;
	}
	// 举报接口	
	async function report(){
		console.log(props.post);
		const res = await postReport({
			report_type:2,
			report_id:props.post.user_post.id,
			reason:3,
			reported_user_id:props.post.user.user_id,
		})
	}
	//举报帖子
	function handleReportPost() {
		console.log("举报帖子");
		let itemList = setActionSheetItems("true"); // 根据身份设置操作菜单选项  
		uni.showActionSheet({
			itemList: itemList,
			success: function (res) {
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				if(login()){	
					if(res.tapIndex === 0){
						console.log("举报");
						showReport.value = true;
						report();
					}
					else if(res.tapIndex === 1){
						console.log("删除");
						uni.showModal({
							title: '确定删除这条帖子吗？',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} 
								else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					else if(res.tapIndex === 2){
						console.log("编辑");
						
					}
				}
				
				
				
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	
</script>

<style scoped lang="scss">
	.post{
		// margin-top: 15upx;
		margin-bottom: 15upx;
		padding: 30upx;
		padding-bottom: 10upx;
		// border-radius: 20upx;
		background-color: #fff;
		.header{
			display: flex;
			justify-content: space-between;
			.header-left{
				display: flex;
				align-items: center;
				.author-infor{
					display: flex;
					flex-direction: column;
					margin-left: 30upx;
				}
				.time{
					margin-top: 10upx;
					font-size: 25upx;
					color: $text;
				}
			}
			.header-right{
				display: flex;
				.btn{
					border-color: $primary;
					color: $primary;
					border-radius: 50rpx;
					white-space: nowrap;	
					font-size: 25upx;
					height: 60upx;
					line-height: 60upx;
					padding: 0upx 25upx;	
					margin-right: 40upx;			
				}
					
				.follow{
					border-color:$text;
					color:$text;
				}
			}
			
			
		}
		.center{
			.content{
				padding: 20upx 0;
				font-size: 30upx
			}
			.images{
				display: grid;
				grid-template-columns: repeat(3,1fr);
				gap: 20upx;
				.image{
					width: 100%;
					height: auto;
					aspect-ratio: 1 / 1;
					 
				}
				
			}
			
		}
		
		.bottom{
			display: flex;
			justify-content: space-around;
			margin-top: 20upx;
			.views{
				display: flex;
				align-items: center;
			}
			.active{
				color: $primary;
			}
		}
	}
</style>